<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>搜索结果</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_j0ppeqhqw7.css"> 
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/ss.css">
</head>
<body>
    <header>
        <div class="t">
            <a href="./index.html">
                <i class="iconfont icon-icon_zuo"></i>
            </a>
            <span>搜索书籍</span>
            <span></span>
        </div>
    </header>
    <div style="height: 20px;"></div>
    <main>
        <ul class="link bg-fff w100p" id="searchResults">
            <!-- 搜索结果将在这里显示 -->
            <!-- <li class="item flex bg-fff mt-20 pb-20" data-id="${item.id}">
                <img src="${item.imgUrl}" alt="">
                <div class="word flex fdc ml-20">
                    <h3>${item.bookname}</h3>
                    <p class="f14">${item.author} ${item.translator}</p>
                    <span>${item.category}</span>
                    <p>
                        <button class="addReading" data-id="${item.id}">已阅读</button>
                        <button class="addToShelf" data-id="${item.id}">加入书架</button>
                    </p>
                </div>
            </li> -->
        </ul>
    </main>
    <footer>
        <div class="bg-fff flex jc-sa fixed w100p">
            <a class="link active flex fdc aic jc-c f888" href="./index.html">
                <i class="iconfont icon-huibenyuedu f22"></i>
                <span class="pt-5 f12">绘本</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./bookshelf.html">
                <i class="iconfont icon-wodeshujia f22"></i>
                <span class="pt-5 f12">书架</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./discover.html">
                <i class="iconfont icon-faxian f22"></i>
                <span class="pt-5 f12">发现</span>
            </a>
            <a class="link flex fdc aic jc-c f888" href="./my.html">
                <i class="iconfont icon-gerenzhongxin f22"></i>
                <span class="pt-5 f12">我的</span>
            </a>
        </div>
    </footer>
    <script src="./js/axios.js"></script>
    <script src="./js/jquery.js"></script>
    <script>
        // 获取URL参数
        function getQueryParam(param) {
            var urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }

        // 搜索功能
        function searchBooks(query) {
            var url = 'http://localhost:3001/likeList';
            axios.get(url).then(function (res) {
                var list = res.data.filter(item => item.bookname.includes(query) || item.author.includes(query));
                renderSearchResults(list);
            }).catch(function (err) {
                console.error('请求失败', err);
                $('#searchResults').html('<li class="item flex bg-fff mt-20 pb-20">请求失败，请稍后再试</li>');
            });
        }

        // 渲染搜索结果
        function renderSearchResults(list) {
            var htmlStr = '';
            if (list.length === 0) {
                htmlStr = '<li class="item flex bg-fff mt-20 pb-20">没有找到匹配的书籍</li>';
            } else {
                list.forEach(function (item) {
                    htmlStr += `
                        <li class="item flex bg-fff mt-20 pb-20" data-id="${item.id}">
                            <img src="${item.imgUrl}" alt="">
                            <div class="word flex fdc ml-20">
                                <h3>${item.bookname}</h3>
                                <p class="f14">${item.author} ${item.translator}</p>
                                <span>${item.category}</span>
                                <p>
                                    <button class="addReading" data-id="${item.id}">已阅读</button>
                                    <button class="addToShelf" data-id="${item.id}">加入书架</button>
                                </p>
                            </div>
                        </li>
                    `;
                });
            }
            $('#searchResults').html(htmlStr);

            // 绑定已阅读按钮点击事件
            $('.addReading').on('click', function() {
                    var bookId = $(this).data('id');
                    bookDetail = list.find(item => item.id === bookId);
                    Book.addReading();
            });

            // 绑定加入书架按钮点击事件
            $('.addToShelf').on('click', function() {
                    var bookId = $(this).data('id');
                    bookDetail = list.find(item => item.id === bookId);
                    Book.addBookShelf();
            });
        }

        // 存储书本的信息
        var bookDetail = {};

        var Book = {
            // 加入书架
            addBookShelf: function() {
                var url = 'http://localhost:3001/bookshelf';
                var data = {
                    "imgUrl": bookDetail.imgUrl,
                    "bookname": bookDetail.bookname,
                    "author": bookDetail.author,
                    "ageRange": bookDetail.ageRange,
                    "category": bookDetail.category,
                    cTime: Date.now(),
                    bookId: bookDetail.id
                };

                axios.post(url, data).then(function (res) {
                    alert('加入成功');
                    console.log(res);
                }).catch(function (err) {
                    console.error('加入书架失败', err);
                });
            },

            // 添加阅读记录
            addReading: function() {
                var url = 'http://localhost:3001/reading'; // 假设这是添加阅读记录的API
                var data = {
                    "imgUrl": bookDetail.imgUrl,
                    "bookname": bookDetail.bookname,
                    "author": bookDetail.author,
                    "ageRange": bookDetail.ageRange,
                    "category": bookDetail.category,
                    cTime: Date.now(),
                    bookId: bookDetail.id
                };

                axios.post(url, data).then(function (res) {
                    alert('添加成功');
                    console.log(res);
                    // 跳转到阅读记录页面
                    window.location.href = './reading.html';
                }).catch(function (err) {
                    console.error('添加阅读记录失败', err);
                });
            },
        };

        // 获取搜索关键词并执行搜索
        var query = getQueryParam('q');
        if (query) {
            searchBooks(query);
        }
    </script>
</body>
</html>